<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/vip.css" />
    <script src="js/carousel.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
  </head>
  <body>
    <script src="./js/rem.js"></script>
    <header>
      <ul class="nav"></ul>
    </header>

    <!--  -->
    <!-- 电影列表 -->
    <main>
      <div class="banner">
        <ul class="carousel">
          <li><img src="./images/index/banner1.png" alt="" /></li>
          <li><img src="./images/index/banner2.jpg" alt="" /></li>
          <li><img src="./images/index/banner3.jpg" alt="" /></li>
        </ul>
        <div class="spans"></div>
        <!-- 导航按钮 -->
        <div class="btns">
          <a href="javascript:;"> < </a> <a href="javascript:;"> > </a>
        </div>
      </div>
      
      <div class="login">
        <div class="avtar">
          <i class="iconfont icon-bussiness-man-fill"></i>
          <div class="text">
            <p>未登录</p>
            <span>登录后查看你的频道</span>
          </div>
        </div>
        <a href="###">开通会员</a>
      </div>
      <!-- <div class="recommend">
        <h4>今日专属推荐</h4>
        <ul>
          <li>
            <img src="./images/vip/1.avif" alt="" />
            <p>禁忌的妻子</p>
            <img src="./images/vip/vip.webp" alt="" class="vip-img" />
          </li>
          <li>
            <img src="./images/vip/1.avif" alt="" />
            <p>禁忌的妻子</p>
            <img src="./images/vip/vip.webp" alt="" class="vip-img" />
          </li>
          <li>
            <img src="./images/vip/1.avif" alt="" />
            <p>禁忌的妻子</p>
            <img src="./images/vip/vip.webp" alt="" class="vip-img" />
          </li>
          <li>
            <img src="./images/vip/1.avif" alt="" />
            <p>禁忌的妻子</p>
            <img src="./images/vip/vip.webp" alt="" class="vip-img" />
          </li>
        </ul>
      </div> -->
      <h4>正在热播</h4>
      <ul class="list"></ul>
    </main>

    <!-- 底部导航 -->
    <footer>
      <a href="./index.html">
        <img src="./images/tabbar/2.png" alt="" />
        <p>首页</p>
      </a>
      <a href="./vip.html">
        <img src="./images/tabbar/4-1.png" alt="" />
        <p>vip</p>
      </a>
      <a href="./hotChat.html">
        <img src="./images/tabbar/1.png" alt="" />
        <p>热议</p>
      </a>
      <a href="./my.html">
        <img src="./images/tabbar/3.png" alt="" />
        <p>我的</p>
      </a>
    </footer>
    <a href="###" id="up">
      <i class="iconfont icon-arrow-up"></i>
    </a>
    <script>
      // id获取
      let up = document.getElementById('up')
      // 滚动事件
      up.onclick = () => {  // 点击回到顶部
        window.scrollTo({
          top: 0,   // 回到顶部
          behavior: 'smooth', // 平滑滚动
        })
      }
      // 定义导航数据
      let navData = [
        '精选',
        '迪家俱乐部',
        'vip俱乐部',
        '一起看',
        '电影',
        '综艺',
        '少儿',
      ]
      let navWrap = document.querySelector('.nav')
      navData.forEach((item) => {
        navWrap.innerHTML += `
      <li><a href="###">${item}</a></li>
      `
      })

      // 电影列表数据
      let movieList = [
        {
          img: './images/hotChat/5.jpg',
          name: '辛巴',
          info: '辛巴自幼失去了父母，沦为孤儿。',
        },
        {
          img: './images/hotChat/2.png',
          name: '熊猫博士和妥妥',
          info: '熊猫博士系列动画片原班人物打造',
        },
        {
          img: './images/hotChat/3.jpg',
          name: '神偷奶爸',
          info: '洗心革面之后，格鲁作为特工成绩斐然',
        },
        {
          img: './images/hotChat/4.jpg',
          name: '狐獴王朝·热播',
          info: '动物纪录片 动物家族 动物生存',
        },
        {
          img: './images/hotChat/5.jpg',
          name: '南粤工匠·热播',
          info: '21岁世技赛夺冠的“原型制作”',
        },
        {
          img: './images/hotChat/6.jpg',
          name: '早餐中国4·南宁卷筒粉',
          info: '咔嚓一口肉夹馍！打工人清晨的续命源泉',
        },
        {
          img: './images/hotChat/1.jpg',
          name: '成龙历险记',
          info: '老爹，小玉和成龙',
        },
        {
          img: './images/hotChat/7.jpg',
          name: '哥，你好',
          info: '马丽、魏翔演绎浪漫父母爱情',
        },
        {
          img: './images/hotChat/8.jpg',
          name: '神奇动物：邓布利多之谜',
          info: '神奇动物学家小雀斑又尬舞了！',
        },
        {
          img: './images/hotChat/9.jpg',
          name: '印度女孩',
          info: '母亲刀子嘴豆腐心，激励女儿勇敢追梦',
        },
      ]
      let movieWrap = document.querySelector('.list')
      // 遍历数据
      movieList.forEach((item) => {  // item是每一项数据
        movieWrap.innerHTML += `
              <li>
                <img src=${item.img} alt="" />
                <p>${item.name}</p>
                <span>${item.info}</span>
              </li>
              `
      })
      // 轮播图
      // 定义轮播图数据
      var swiper = new Swiper('.mySwiper', {
        spaceBetween: 30, // 间距
        centeredSlides: true, // 居中
        loop: true, // 循环
        autoplay: {
          delay: 5000,  // 间隔时间
          disableOnInteraction: false,  // 手动滑动后继续轮播
        },
        pagination: {
          el: '.swiper-pagination', // 分页器
          clickable: true,    // 点击分页器切换
        },
        navigation: {
          nextEl: '.swiper-button-next',  // 下一张
          prevEl: '.swiper-button-prev',  // 上一张
        },
      })
    </script>
  </body>
</html>
